<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>拾光&nbsp;•&nbsp;失物招领</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <meta name="renderer" content="webkit">

    <meta name="title" content="拾光&nbsp;•&nbsp;失物招领" />
    <meta name="img" content="http://source.timepicker.cn/uploads/default/laf.png-120" />
    <meta name="description" content="不管是捡了东西还是丢了东西都来这里看看吧" />
    
    <!--icon-->
    <link rel="shortcut icon" href="http://source.timepicker.cn/uploads/default/laf.png-120" />
    <!--拾光css-->
    <link rel="stylesheet" href="http://source.timepicker.cn/static/css/ptime_v0.4.min.css">
    <!-- 小应用css -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- animate css -->
    <link rel="stylesheet" href="http://source.timepicker.cn/static/css/animate.min.css">
    <!--主题css-->
    <style type="text/css">
      a{color: #a8c0d8;}   /* 未访问的链接 */
      .active{color:#a8c0d8 !important; border-color: #a8c0d8 !important;}
      nav ul li a.current{color: #a8c0d8;border-color: #a8c0d8;}
      .mcolor{color: #a8c0d8;}
      .bg-mcolor{background-color: #a8c0d8 !important;}
      .button.mcolor{border-color:#a8c0d8;}
      .button.mcolor.active{background-color: #a8c0d8;}
      .label.current{background-color: #a8c0d8;}
      #top-a{background-color: #a8c0d8;}
    </style>
</head>

<body class="agent-{{ua}}">
    <!--头部-->
    <header class="bg-mcolor fixed top" >
        <h1>拾光&nbsp;•&nbsp;失物招领</h1>
        <span class="button top-right white" onclick="share()">分享</span>
    </header>
    <!--其他区域-->
    <section>
      <div class="info-container">
        <p><span class="red">* </span>丢了还是捡了？</p>
        <input type="radio" name="laf" class="radio" value="0" {{#if result.type}}{{else}}checked{{/if}}> 丢了
        <input type="radio" name="laf" class="radio" value="1" {{#if result.type}}checked{{/if}}> 捡了
        <br><br>
        <p><span class="red">* </span>概括说说丢了/捡了什么</p>
        <input id="title" class="simpleline-input input-border" type="text" name="title" placeholder="丢的/捡的东西(别写太长..)">
        <br><br>
        <p><span class="red">* </span>说说丢了/捡了东西地点</p>
        <input id="position" class="simpleline-input input-border" type="text" name="position" placeholder="地点">
        <br><br>
        <p><span class="red">* </span>联系方式（我们不会给任何没有经过教务系统身份认证的人公开你的信息）</p>
        <input id="contact" class="simpleline-input input-border" type="text" name="contact" placeholder="联系方式" value="{{result.phone}}" disabled="yes">
        <br><br>
        <p>还可以再具体描述一下</p>
        <textarea id="intro" class="textarea-input input-border" placeholder="描述"></textarea>
        <br><br>
        <p>有图就更好了（第一张图非常关键）</p>
        <div class="clear"></div>
        <img src="/image/add.png" class="add-picture-button" onclick="upload()">
        <!-- <i class="icon iconfont add-picture-button mcolor" onclick="upload()">&#xe68d;</i> -->
        <!-- <div onclick="upload()" class="add-picture-button mcolor"><i class="icon iconfont" style="font-size: 4rem;">&#xe68d;</i></div> -->
        <input id="uploadpic" accept="image/*" name="fileimg" type="file"  style="display:none;"/>
        <div class="clear"></div>
        <br><br>
        <p>标签</p>
        {{#each result.tags}}
          <span class="tag tag-normal" id="{{_id}}">{{name}}</span>
        {{/each}}
        <br><br>
        <hr>
        <p><a id="publish" class="right filled-button">发布</a></p>
      </div>
    </section>
    <!-- 分享 -->
    <div id="share-box">
     <div id="share-top-box">
        <h4>分享至：</h4>   
        <div class="bdsharebuttonbox">
          <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
          <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
          <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
        </div>
     </div>
    </div>
    <div id="toast-box" ></div>
    <!--拾光js-->
    <script type="text/javascript" src="http://source.timepicker.cn/static/js/ptime_v0.4.min.js"></script>
    <script type="text/javascript">
      // 网页分享
      if ('{{ua}}' == 'other') {
        var img_url = '';
        if ($('meta[name="img"]')[0].content) {
            img_url = $('meta[name="img"]')[0].content;
        }else{
            img_url = typeof($('img')[0])!='undefined'?$('img')[0].src:$('link[rel="shortcut icon"]')[0].href;
        };
        window._bd_share_config = {
            common : {
                bdText : $('meta[name="title"]')[0].content, 
                bdDesc : $('meta[name="description"]')[0].content, 
                bdUrl  : window.location.href,   
                bdPic  : img_url
            },
            share : [{
                "bdSize" : 24
            }]
        }
        with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
      }
    </script>

    <script type="text/javascript" src="/js/index.js"></script>

    <script type="text/javascript">
      var token = '{{result.token}}'

      $('#publish').on(getListenEvent(), function(e) {
        if (!$(this).prehandler.handler(e)) return;
        if ($("input[name='laf']:checked").length == 0) {
          toast('请填写您丢了，还是捡了东西')
          return
        }

        if (!$('#title').val()) {
          toast('请填写您丢了/捡了什么东西')
          return
        }
        if (!$('#position').val()) {
          toast('请填写你在哪里丢了/捡了东西')
          return
        }
        $.ajax({
          url: '/laf/',
          type: 'post',
          data: {
            token: token,
            title: $('#title').val(),
            position: $('#position').val(),
            contact: $('#contact').val(),
            intro: $('#intro').val() || '',
            images: JSON.stringify($('.upload-image').map(function(node){return $(this).attr('src')})),
            tags: JSON.stringify(Object.keys(tags)),
            type: Number($("input[name='laf']:checked").val())
          },
          success: function (data) {
            if (data.error > 0) {
              toast(data.message);
              return;
            } else {
              toast('发布成功，正在跳转...')
              location.href = Number($("input[name='laf']:checked").val()) == 0 ? '/laf/lost' : '/laf/found'
            }
          },
          error: function (data) {
            toast('程序员正在打瞌睡，打个电话给他？');
          }
        })
      })

      var tags = {}
      '{{result.selectedTags}}'.split(',').forEach(function (id) {
        tags[id] = true
      })
      if (Object.keys(tags).length > 0) {
        Object.keys(tags).forEach(function(id) {
          $('#' + id).removeClass('tag-normal').addClass('tag-filled')
        })
      }
      $('.tag').on(getListenEvent(), function (e) {
        if (!$(this).prehandler.handler(e)) return;
        if ($(this).hasClass('tag-normal')) {
          $(this).removeClass('tag-normal').addClass('tag-filled')
          tags[$(this).attr('id')] = true
        } else {
          $(this).removeClass('tag-filled').addClass('tag-normal')
          delete tags[$(this).attr('id')]
        }
      })

      $('#uploadpic').on('change',function(){
        if ($('.upload-image').length > 4) {
          toast('最多只能传5张图片')
          return;
        }
      　if(window.FormData) {　
      　　var formData = new FormData();
          if (!document.getElementById('uploadpic').files[0]) {return;};
      　　　　formData.append('upload', document.getElementById('uploadpic').files[0]);
             formData.append('token', token)
      　　　　var xhr = new XMLHttpRequest()
      　　　　xhr.open('POST', '/upload')
      　　　　xhr.onload = function () {
    　　　　　　if (xhr.status === 200) {
  　　　　　　　　toast('上传成功')
                var temp = JSON.parse(xhr.response);
                var uploadImg = $('<img>').attr('src', temp.result[0]).addClass('upload-image')
                var deleteSpan = $('<span></span>').addClass('delete-image-button').append($('<i></i>').addClass('icon').addClass('iconfont').append('&#xe611;')).on(getListenEvent(), function (e) {
                  if (!$(this).prehandler.handler(e)) return
                  $(this).parent().remove()
                })
                // $(".add-picture-button").before('<div class="upload-image-container"><img src="'+temp.result[0]+'" class="upload-image"/><span class="delete-image-button"><i class="icon iconfont">&#xe611;</i></span></div>')
                $('.add-picture-button').before($('<div></div>').addClass('upload-image-container').append(uploadImg).append(deleteSpan))
                $("#headpic").attr("src",temp.result[0])
    　　　　　　} else {
    　　　　　　  toast('出错了')
    　　　　　　}
      　　　　}
      　　　　xhr.send(formData)
        }
      });

      function upload () {
        $('#uploadpic').click() 
      }

    </script>
</body>
</html>